<template>
  <div>
    <el-form ref="registerForm" :model="user" :rules="rules" class="loginContainer">
      <h3 class="loginTitle">用户注册</h3>
      <!-- 用户名 -->
      <el-form-item label="用户名:" prop="username">
        <el-input
          size="mini"
          prefix-icon="el-icon-edit"
          v-model="user.username"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="昵称:" prop="nickname">
        <el-input
          size="mini"
          prefix-icon="el-icon-edit"
          v-model="user.nickname"
          placeholder="请输入用户昵称"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码:" prop="password">
        <el-input
          type="password"
          size="mini"
          prefix-icon="el-icon-edit"
          v-model="user.password"
          placeholder="请输入用户密码"
        ></el-input>
      </el-form-item>
      <el-form-item label="手机号码:" prop="phone">
        <el-input
          size="mini"
          prefix-icon="el-icon-edit"
          v-model="user.phone"
          placeholder="请输入手机号码"
        ></el-input>
      </el-form-item>
      <el-form-item label="电子邮箱:" prop="email">
        <el-input
          size="mini"
          prefix-icon="el-icon-edit"
          v-model="user.email"
          placeholder="请输入邮箱地址"
        ></el-input>
      </el-form-item>
      <el-form-item label="用户角色:" prop="identityType">
        <el-select v-model="user.identityType" placeholder="请选择角色">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地址:" prop="address">
        <el-input
          size="mini"
          prefix-icon="el-icon-edit"
          v-model="user.address"
          placeholder="请输入邮箱地址"
        ></el-input>
      </el-form-item>
      <el-form-item label="学校名称:" prop="school">
        <el-input
          size="mini"
          prefix-icon="el-icon-edit"
          v-model="user.school"
          placeholder="请输入学校名称"
        ></el-input>
      </el-form-item>
      <!-- 登录按钮 -->
      <div>
        <el-button type="primary" style="width: 100%; float: left" @click="register"
          >注册</el-button
        >
      </div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'register',
  data() {
    // 验证手机号的规则
    var checkMobile = (rule, value, cb) => {
      // 验证手机号的正则表达式
      const regMobile =
        /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/

      if (regMobile.test(value)) {
        // 手机号码格式是合法的
        return cb()
      }

      // 手机号码格式是不合法的
      cb(new Error('请输入合法的手机号'))
    }
    return {
      //表单验证类
      user: {
        username: '',
        nickname: '',
        password: '',
        phone: '',
        email: '',
        identityType: '',
        address: '',
        school: '',
      },
      options: [
        {
          value: '学生',
          label: '学生',
        },
        {
          value: '老师',
          label: '老师',
        },
      ],
      rules: {
        username: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在3到10个字符', trigger: 'blur' },
        ],
        nickname: [
          { required: true, message: '用户昵称不能为空', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '用户密码不能为空', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在6到15个字符', trigger: 'blur' },
        ],
        email: [
          { required: true, message: '邮箱不能为空', tigger: 'blur' },
          {
            type: 'string',
            message: '邮箱格式不正确',
            trigger: 'blur',
            transform(value) {
              if (
                !/^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(
                  value
                )
              ) {
                return true
              } else {
              }
            },
          },
          {
            type: 'string',
            message: '长度不能超过30位',
            trigger: 'blur',
            max: 30,
          },
        ],
        phone: [
          { required: true, message: '手机号码不能为空', trigger: 'blur' },
          { validator: checkMobile, tigger: 'blur' },
        ],
        identityType: [
          { required: true, message: '用户角色不能为空', trigger: 'blur' },
        ],
      },
    }
  },
  methods: {
    register(){
      this.postRequest('/user/addUser',this.user).then(resp=>{
        if(resp){
          this.$router.push({ path: '/login' })
        }
      })
    }
  },
}
</script>

<style >
.loginContainer {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 350px;
  padding: 15px 35px 55px 35px;
  background-color: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.loginTitle {
  margin: 0px auto 40px auto;
  text-align: center;
}
.loginRemember {
  text-align: left;
  margin: 0px 0px 15px 0px;
}
.el-form-item__content {
  display: flex;
  align-items: center;
}
</style>